{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>awesome-spider</title>
    <link rel="stylesheet" type="text/css" href="{% static 'account/css/login.css' %}">
    <link rel="icon" href="{% static 'account/img/logo.png' %}" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/a81368914c.js"></script>
    <script type="text/javascript" src="{% static 'account/script/jquery-3.5.1.js' %}"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style type="text/css">
    #error .errorMsg {
        float: right;
        margin-left: 10px;
        margin-top: 10px;
        color: red;
    }
</style>
<script>
    $(function () {
        $("#username").blur(function () {
            let usernameText = $("#username").val();

            let usernamePatt = /^\w{5,12}$/;

            if ((usernamePatt.test(usernameText)) || $("#username").val() == "") {

                $(".errorMsg").text("");
            } else {

                $(".errorMsg").text("用户名不合法！");
            }
        });
        $("#password").blur(function () {

            let passwordText = $("#password").val();

            let passwordPatt = /^\w{5,12}$/;

            if ((passwordPatt.test(passwordText)) || $("#password").val() == "") {

                $(".errorMsg").text("");
            } else {
                $(".errorMsg").text("密码不合法！");
            }
        });

        $("#repwd").blur(function () {
            let passwordText = $("#password").val();
            let repwdText = $("#repwd").val();
            if ((passwordText == repwdText) || $("#repwd").val() == "") {
                $(".errorMsg").text("");

            } else {
                $(".errorMsg").text("确认密码和密码不一致！");

            }
        });

        $("#email").blur(function () {

            let emailText = $("#email").val();

            let emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;

            if (emailPatt.test(emailText) || $("#email").val() == "") {

                $(".errorMsg").text("");

            } else {
                $(".errorMsg").text("邮箱格式不合法！");
            }
        })


        $("#sub_btn").click(function () {

            let usernameText = $("#username").val();

            let usernamePatt = /^\w{5,12}$/;

            let passwordText = $("#password").val();

            let passwordPatt = /^\w{5,12}$/;

            let repwdText = $("#repwd").val();

            let emailText = $("#email").val();

            let emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
            if ((usernamePatt.test(usernameText)) && (passwordPatt.test(passwordText)) && (passwordText == repwdText)
                && (emailPatt.test(emailText))) {
                return true;
            } else {
                alert("注册信息不符合要求！");
                return false;
            }
        })
    })


</script>
<body>
<img class="wave" src="{% static 'account/img/wave.png' %}">
<div class="container">
    <div class="img">
        <img src="{% static 'account/img/bg.svg' %}">
    </div>
    <div class="login-content">
        <form method="post" action="/account/signup.do">
            {% csrf_token %}
            <h2 class="title">欢迎注册</h2>
            <div id="error">
                <span class="errorMsg">{{ failed }}</span>
            </div>
            <div class="input-div one">
                <div class="i">
                    <i class="fas fa-user"></i>
                </div>
                <div class="div">
                    <h5>用户名</h5>
                    <input type="text" id="username" name="username" class="input">
                </div>
            </div>
            <div class="input-div pass">
                <div class="i">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="div">
                    <h5>密码</h5>
                    <input type="password" id="password" name="password" class="input">
                </div>
            </div>
            <div class="input-div pass">
                <div class="i">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="div">
                    <h5>确认密码</h5>
                    <input type="password" id="repwd" name="repwd" class="input">
                </div>
            </div>
            <div class="input-div pass">
                <div class="i">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="div">
                    <h5>电子邮件</h5>
                    <input type="text" class="input" id="email" name="email">
                </div>
            </div>
            <input type="hidden" name="identity" value="normal">
            <input type="submit" class="btn" id="sub_btn" value="注 册">
        </form>
    </div>
</div>
<script type="text/javascript" src="{% static 'account/js/main.js' %}"></script>
</body>
</html>